<template>
	<view class="user-container">
		<view class="header">
			<view class="userinfo" @click="toPage">
				<view class="face"><image :src="userInfo.avatar" mode="aspectFill"></image></view>
				<view class="info">
					<view class="username">{{ userInfo.nickname || '登录/注册' }}</view>
					<view class="tag" v-show="userInfo.role">{{ userInfo.role === 'company' ? '企业' : '学生' }}</view>
				</view>
			</view>
			<view class="setting"><uv-icon name="setting" color="#fff" size="28"></uv-icon></view>
		</view>
		<view class="orders">
			<ul class="list">
				<!-- 企业 -->
				<template v-if="userInfo.role === 'company'">
					<li v-for="(item, index) in companyOrderList" :key="item.name">
						<navigator :url="item.url" hover-class="none">
							<view class="icon" :class="item.class">
								<text class="yzb label-icon" :class="item.icon"></text>
							</view>
							<view class="label">{{ item.name }}</view>
						</navigator>
					</li>
				</template>
				<!-- 学生 -->
				<template v-else>
					<li v-for="(item, index) in studentOrderList" :key="item.name">
						<navigator :url="item.url" hover-class="none">
							<view class="icon" :class="item.class">
								<text class="yzb label-icon" :class="item.icon"></text>
							</view>
							<view class="label">{{ item.name }}</view>
						</navigator>
					</li>
				</template>
			</ul>
		</view>
		<view class="container">
			<ul class="list">
				<li class="item" v-for="(row, index) in severList" :key="index">
					<view class="icon"><image :src="`../../static/img/my/${row.icon}`"></image></view>
					<view class="text">{{ row.name }}</view>
					<text class="yzb yzb-next icon-next"></text>
				</li>
				<li class="item" @click="handleQuit">
					<view class="icon"><image src="../../static/img/my/share.png"></image></view>
					<view class="text">退出登录</view>
					<text class="yzb yzb-next icon-next"></text>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { studentOrderList, companyOrderList, severList } from './const.js';
import { logout } from '@/apis/user/index.js';
import socketManager from '@/utils/websocket.js';

export default {
	data() {
		return {
			studentOrderList,
			companyOrderList,
			severList
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onShow() {
		const token = uni.getStorageSync('token');
		if (!token) {
			uni.navigateTo({ url: '/pages/user/login/index' });
		}
	},
	methods: {
		// 登录
		toPage() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.navigateTo({ url: '/pages/login/default' });
				return;
			}
			uni.navigateTo({ url: '/pages/user/info' });
		},
		// 退出登录
		async handleQuit() {
			// TODO 需要放到vuex中，退出登录需要清除很多vuex中的数据，如用户信息、token等等
			const res = await logout(this.userInfo.id);
			if (res.code === 200) {
				uni.removeStorageSync('token');
				uni.showToast({ icon: 'none', title: '退出成功' });
				socketManager.close();
				const time = setTimeout(() => {
					clearTimeout(time);
					uni.navigateTo({ url: '/pages/user/login/index' });
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.list .scale {
	transform: scale(1.15);
}

.header {
	height: 240rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	background-color: $main-color;
	.userinfo {
		width: 100%;
		display: flex;
		align-items: center;
		color: #fff;
		.face {
			width: 120rpx;
			height: 120rpx;
			margin-right: 40rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.username {
			font-size: 40rpx;
			margin-bottom: 10rpx;
		}
		.tag {
			width: 80rpx;
			text-align: center;
			font-size: 24rpx;
			padding: 4rpx 6rpx;
			border-radius: 20rpx;
			background-color: #f37b1d;
		}
	}
	.setting {
		color: #fff;
	}
}

.orders {
	width: 100%;
	height: 80rpx;
	margin: -1px 0 120rpx 0;
	background-color: $main-color;
	border-radius: 0 0 100% 100%;
	.list {
		width: 92%;
		height: 170rpx;
		margin: auto;
		border-radius: 24rpx;
		background-color: #fff;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
		display: flex;
		justify-content: space-around;
		align-items: center;
		li {
			text-align: center;
		}
		.label-icon {
			font-size: 48rpx;
			color: $main-color;
		}
		.label {
			margin-top: 10rpx;
			font-size: 26rpx;
		}
	}
}

.container .item {
	height: 100rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #e7e7e7;
	image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.text {
		width: 100%;
		font-size: 28rpx;
		color: #666;
	}
}
</style>
